<template>
	<div>
		<el-card shadow="never">
			<!-- <div style="text-align: left;">
				<el-date-picker
					class="x_soso"
					v-model="valueDate"
					type="daterange"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
				></el-date-picker>
				<el-input class="x_soso" v-model="search.searchInput" placeholder="请输入关键字搜索"></el-input>
				<el-button type="primary" @click="searchList">查询</el-button>
			</div> -->
			<div style="text-align: left;">
				<el-button type="primary" @click="reloadVal">刷新</el-button>
				<el-button type="primary" @click="addColumnClick">
					<i class="el-icon-plus"></i>
					新增菜单
				</el-button>
			</div>
			<div style="clear:both"></div>

			<el-table
				v-loading="loading"
				:data="tableData"
				row-key="menuId"
				:indent = 'numberData'
				:default-expand-all="isExpand"
				:tree-props="{ children: 'childenMenuList', hasChildren: 'hasChildren' }"
				style="width: 100%;margin-top: 20px"
			>
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="菜单名称" align="left" width="250" prop="menuName"></el-table-column>
				<el-table-column label="父菜单ID" align="center" width="150" prop="parentMenuId"></el-table-column>
				<el-table-column label="菜单说明" align="center" width="150" prop="menuPath"></el-table-column>
				<el-table-column label="菜单图标" align="center" width="150" prop="menuIcon"></el-table-column>
				<el-table-column label="是否为父级菜单" align="center" width="150" prop="isParent">
					<template slot-scope="scope">
						<span v-if="scope.row.isParent == 1">是</span>
						<span v-if="scope.row.isParent == 2">否</span>
					</template>
				</el-table-column>
				<el-table-column label="菜单路径" align="center" width="150" prop="menuUrl"></el-table-column>
				<el-table-column label="备注" align="center" width="150" prop="remake"></el-table-column>
				<!-- <el-table-column label="创建人" align="center" width="150" prop="createUser"></el-table-column> -->
				<el-table-column label="创建时间" align="center" width="180" prop="createTime"></el-table-column>
				<!-- <el-table-column label="更新人" align="center" width="150" prop="updateUser"></el-table-column> -->
				<el-table-column label="更新时间" align="center" width="180" prop="updateTime"></el-table-column>
				<el-table-column fixed="right" label="停启用状态" align="center" width="150">
					<template slot-scope="scope">
						<!-- <div v-if="scope.row.userId == 'admin'"></div> -->
						<el-switch
							v-model="scope.row.isEnabled"
							active-color="#13ce66"
							inactive-color="#dedede"
							:active-value="true"
							:inactive-value="false"
							@change="changeSwitch(scope.$index, scope.row)"
						></el-switch>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" align="center" width="200">
					<template slot-scope="scope">
						<el-button @click="cellClick(scope.row)" icon="el-icon-edit" type="warning" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<el-dialog :title="cname" :visible.sync="dialogVisible" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="父级菜单ID" prop="parentMenuId">
					<el-cascader style="width: 100%;" placeholder="请选择父级菜单" v-model="ruleForm.parentMenuId" :options="options"></el-cascader>
				</el-form-item>
				<el-form-item label="菜单名称" prop="menuName"><el-input v-model="ruleForm.menuName"></el-input></el-form-item>
				<el-form-item label="菜单说明" prop="menuPath"><el-input v-model="ruleForm.menuPath"></el-input></el-form-item>
				<el-form-item label="菜单图标" prop="menuIcon">
					<el-input v-model="ruleForm.menuIcon"></el-input>
					<!-- <div><svg-icon v-for="(item, index) in icons" :icon-class="item.icon" :key="index"></svg-icon></div>
					<div>
						<svg-icon icon-class="icon_Organization"></svg-icon>
					</div> -->
				</el-form-item>
				<el-form-item label="菜单路径" prop="menuUrl"><el-input v-model="ruleForm.menuUrl"></el-input></el-form-item>
				<el-form-item label="备注"><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.remake"></el-input></el-form-item>
				<el-form-item>
					<el-button @click="dialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
		<el-dialog :title="cname" :visible.sync="dialogColor" width="720px" height="600px" :close-on-click-modal="false">
			<el-form :model="ruleFormEdit" :rules="rulesEdit" ref="ruleFormEdit" label-width="100px" class="demo-ruleForm">
				<el-form-item label="父级菜单ID" prop="parentMenuId">
					<el-input v-model="ruleFormEdit.parentMenuName" disabled></el-input>
				</el-form-item>
				<el-form-item label="菜单名称" prop="menuName"><el-input v-model="ruleFormEdit.menuName"></el-input></el-form-item>
				<el-form-item label="菜单说明" prop="menuPath"><el-input v-model="ruleFormEdit.menuPath"></el-input></el-form-item>
				<el-form-item label="菜单图标" prop="menuIcon"><el-input v-model="ruleFormEdit.menuIcon"></el-input></el-form-item>
				<el-form-item label="菜单路径" prop="menuUrl"><el-input v-model="ruleFormEdit.menuUrl"></el-input></el-form-item>
				<el-form-item label="备注"><el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleFormEdit.remake"></el-input></el-form-item>
				<el-form-item>
					<el-button @click="dialogColor = false">取 消</el-button>
					<el-button type="primary" @click="submitFormEdit('ruleFormEdit')">保存</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import Cookie from 'js-cookie';
import { menuListManage, statusType, addMenuList, parentMenuList, dataEMenuList, updateMenuList } from '../../../server/index.js';
export default {
	inject: ['reload'],
	data() {
		return {
			//查询
			valueDate: [],
			search: {},
			tableData: [],
			loading: true,
			cname: '',
			isExpand: false,
			dialogVisible: false,
			dialogColor: false,
			ruleForm: {},
			rules: {
				parentMenuId: [{ required: true, message: '请选择父级菜单', trigger: 'change' }],
				menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }, { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }],
				menuPath: [{ required: true, message: '请输入菜单说明', trigger: 'blur' }, { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }],
				menuIcon: [{ required: true, message: '请输入菜单图标', trigger: 'blur' }, { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }],
				menuUrl: [{ required: true, message: '请输入菜单路径', trigger: 'blur' },{ min: 0, max: 80, message: '长度在 0 到 80 个字符', trigger: 'blur' }],
			},
			value: [],
			options: [],
			ruleFormEdit: {},
			rulesEdit: {
				menuName: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }, { min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur' }],
				menuPath: [{ required: true, message: '请输入菜单说明', trigger: 'blur' }, { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }],
				menuIcon: [{ required: true, message: '请输入菜单图标', trigger: 'blur' }, { min: 0, max: 40, message: '长度在 0 到 40 个字符', trigger: 'blur' }],
				menuUrl: [{ required: true, message: '请输入菜单路径', trigger: 'blur' },{ min: 0, max: 80, message: '长度在 0 到 80 个字符', trigger: 'blur' }],
			},
			menuId: '',
			numberData:16,
			icons: [{
					id: 0,
					icon: 'icon_System management'
				},{
					id:1,
					icon:'icon_Organization'
				},{
					id:2,
					icon:'icon_Role Management'
				},{
					id:3,
					icon:'icon_Administrator'
				}
			]
		};
	},
	mounted() {
		let _this = this;
		_this.columnFind();
		Cookie.remove('tabList');
	},
	methods: {
		// 刷新方法
		reloadVal() {
			this.reload();
		},
		// 查询、
		searchList() {
			const _this = this;
			_this.columnFind();
		},
		// 列表数据
		columnFind() {
			const _this = this;
			_this.http.request({
				url: menuListManage,
				data: '',
				success: function(res) {
					_this.loading = false;
					_this.tableData = res.list;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 听启用
		changeSwitch(index, row) {
			const _this = this;
			let isEnabled = '';
			if (row.isEnabled == true) {
				isEnabled = 1;
			} else {
				isEnabled = 0;
			}
			let dataMsg = {
				menuId: row.menuId,
				status: isEnabled
			};
			_this.http.request({
				url: statusType,
				data: dataMsg,
				success: function(res) {
					if (res == 1) {
						row.isEnabled = true;
					} else {
						row.isEnabled = false;
					}
				},
				error: function(err) {
					row.isEnabled = !row.isEnabled;
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		//父级菜单ID   parentMenuList
		parentMenuId() {
			const _this = this;
			_this.http.request({
				url: parentMenuList,
				data: '',
				method: 'GET',
				success: function(res) {
					_this.options = res.list;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		// 新增菜单
		addColumnClick() {
			let _this = this;
			_this.ruleForm = {};
			_this.dialogVisible = true;
			_this.cname = '新增菜单';
			_this.parentMenuId();
		},
		submitForm(formName) {
			const _this = this;
			if(_this.ruleForm.remake && _this.ruleForm.remake.length > 100){ 
				_this.$message({
					offset: '200',
					message: '备注长度不能超过100个字符'
				});
				return;
			}
			this.$refs[formName].validate(valid => {
				if (valid) {
					let parentMenuId;
					if(_this.ruleForm.parentMenuId.length == 1){
						parentMenuId = _this.ruleForm.parentMenuId
					}else{
						parentMenuId = _this.ruleForm.parentMenuId[_this.ruleForm.parentMenuId.length-1];
					}
					console.log(parentMenuId)
					let dataMsg = {
						parentMenuId: parentMenuId,
						menuName: _this.ruleForm.menuName == undefined ? '' : _this.ruleForm.menuName,
						menuPath: _this.ruleForm.menuPath == undefined ? '' : _this.ruleForm.menuPath,
						menuIcon: _this.ruleForm.menuIcon == undefined ? '' : _this.ruleForm.menuIcon,
						menuUrl: _this.ruleForm.menuUrl == undefined ? '' : _this.ruleForm.menuUrl,
						remake: _this.ruleForm.remake == undefined ? '' : _this.ruleForm.remake,
						menuType:'1'
					};
					_this.http.request({
						url: addMenuList,
						data: dataMsg,
						success: function() {
							_this.dialogVisible = false;
							_this.reload();
						},
						error: function(err) {
							_this.$message({
								offset: '200',
								message: err.msg
							});
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		// 编辑
		cellClick(row) {
			const _this = this;
			this.cname = '编辑菜单';
			this.dialogColor = true;
			_this.menuId = row.menuId;
			this.http.request({
				url: dataEMenuList,
				data: {
					menuId: row.menuId
				},
				success: function(res) {
					_this.ruleFormEdit = res;
					_this.ruleFormEdit.parentMenuId = res.parentMenuId;
				},
				error: function(err) {
					_this.$message({
						offset: '200',
						message: err.msg
					});
				}
			});
		},
		submitFormEdit(formName) {
			const _this = this;
			if(_this.ruleForm.remake && _this.ruleForm.remake.length > 100){
				_this.$message({
					offset: '200',
					message: '备注长度不能超过100个字符'
				});
				return;
			}
			_this.$refs[formName].validate(valid => {
				if (valid) {
					let dataMsg = {
						menuId:_this.menuId,
						parentMenuId: _this.ruleFormEdit.parentMenuId,
						menuName: _this.ruleFormEdit.menuName == undefined ? '' : _this.ruleFormEdit.menuName,
						menuPath: _this.ruleFormEdit.menuPath == undefined ? '' : _this.ruleFormEdit.menuPath,
						menuIcon: _this.ruleFormEdit.menuIcon == undefined ? '' : _this.ruleFormEdit.menuIcon,
						menuUrl: _this.ruleFormEdit.menuUrl == undefined ? '' : _this.ruleFormEdit.menuUrl,
						remake: _this.ruleFormEdit.remake == undefined ? '' : _this.ruleFormEdit.remake
					};
					this.http.request({
						url: updateMenuList,
						data: dataMsg,
						success: function() {
							_this.dialogColor = false;
							_this.reload();
						},
						error: function(err) {
							_this.$message({
								offset: '200',
								message: err.msg
							});
						}
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less">
.el-icon-arrow-right:before,
.el-icon-arrow-right {
	color: #333 !important;
}
.el-button--primary {
	background: rgba(113, 106, 202, 1);
	border: none;
}

.el-button--primary:hover {
	color: #606266;
	background: rgba(255, 255, 255, 1);
	border: 1px solid rgba(113, 106, 202, 1);
}

.el-button--warning {
	color: #fff;
	background-color: #f4516c;
	border-color: #f4516c;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.createFollowCheck input[type='number'] {
	-moz-appearance: textfield;
}
</style>
